<template>
    <div>
        <el-row type="flex" justify="center"><!-- 行 -->
            <el-col :span="7" class="loginForm">
                <!-- 列 span 栅格  offset 编译 -->
                <!-- el-container 列内部容器的元素 -->
                <el-container>

                    <el-form ref="form" id="f" :model="form" label-width="80px">
                        <h1>登录</h1>
                        <div class="sizeInput">
                            <el-form-item label="用户名">
                                <!-- form 对象 username对象的属性  -->
                                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
                            </el-form-item>
                        </div>
                        <div class="sizeInput">
                            <el-form-item label="密码">
                                <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
                            </el-form-item>
                        </div>
                        <div class="sizeInput">
                            <el-form-item>
                                <el-button type="success" @click="sub">登录</el-button>
                                <el-button>取消</el-button>
                            </el-form-item>
                        </div>
                        <p align="right" id="regA">
                            <el-button type="text" @click="toReg">点我注册</el-button>
                        </p>
                    </el-form>
                </el-container>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Qs from 'qs';

    export default {
        name: "Login",
        data() {
            return {
                form: {
                    username: '',
                    password: ''
                }
            }
        },
        methods: {
            sub() {
                //异步登录
                let vm = this;
                vm.$axios({
                    method: "post",
                    url: "http://localhost:8081/emp/login",
                    transformRequest: [
                        function (data) {
                            return Qs.stringify(data);
                        }
                    ],
                    data: {
                        ename: vm.form.username,
                        pwd: vm.form.password
                    }
                }).then(function (response) {
                    //接受服务器响应
                    let data = response.data;
                    if (data != null && data != "") {
                        //TypeError: Cannot read properties of undefined (reading '$message')
                        vm.$message({
                            message: '登录成功',
                            type: 'success'
                        });
                        //保存用户数据  使用用户数据取覆盖全局对象 user 的值
                        vm.$store.dispatch('asyncUpdateUser', data);
                        //设置定时器 1.5秒后执行页面跳转
                        //只会执行1次, 倒计时执行
                        setTimeout(function () {
                            vm.$router.push("/index")
                        },1500)
                    } else {
                        vm.$message.error('用户名或密码有误');
                    }
                })


            },
            toReg(){
                this.$router.push("/reg");
            }
        }
    }
</script>

<style scoped>
    .loginForm {
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    #f {
        width: 600px;
    }

    .sizeInput {
        width: 300px;
    }
    #regA{
        width: 330px;
    }
</style>